<template>
	<div class="zydd-wrapper">
		<div class="zydd-wrapper-loader"></div>
		<p>钉钉登陆跳转中</p>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getUrlParam, client, consolelog, path } from '@/utils'
import * as dt from 'dingtalk-jsapi'

const bfGotoUrl = ref('')
const myCorpId: any = ref('')

bfGotoUrl.value = getUrlParam('state') ?? ''
myCorpId.value = getUrlParam('corp_id') ?? ''

onMounted(() => {
	if (myCorpId.value !== '') {
		sessionStorage.setItem('corpId', myCorpId.value)
	} else {
		myCorpId.value = sessionStorage.getItem('corpId')
	}

	if (bfGotoUrl.value === '') {
		if (client.isPc()) {
			bfGotoUrl.value = '/desktop.html'
		} else {
			bfGotoUrl.value = path.getFullPath('/ego/mobile/')
		}
	}

	myCorpId.value = sessionStorage.getItem('corpId')

	dt.ready(function () {
		dt.runtime.permission.requestAuthCode({
			corpId: myCorpId.value,
			onSuccess: function (info: any) {
				if (info.code) {
					window.location.href = path.getFullPath(`/ego_base_info/v1/public/sso/dingtalk/dingAppLogin3d?code=${info.code}&corp_id=${myCorpId.value}&state=${bfGotoUrl.value}`)
				}
			},
		})
	})
})
</script>

<style lang="less" scoped>
.zydd-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	flex-direction: column;
	background: #fff;
	.zydd-wrapper-loader {
		border: 4px solid #f3f3f3;
		border-radius: 50%;
		border-top: 4px solid #3498db;
		width: 45px;
		height: 45px;
		-webkit-animation: spin 2s linear infinite;
		animation: spin 2s linear infinite;
	}

	@-webkit-keyframes spin {
		0% {
			-webkit-transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(360deg);
		}
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}

	p {
		margin-top: 20px;
		color: #3498db;
	}
}
</style>
